<template>
    <div class="logic-flow-container">
      <div class="logic-flow-header">
        <el-button type="primary" @click="routerClick" >组态生成页</el-button>
        <!-- <el-button type="primary" @click="submit">提交</el-button> -->
      </div>
      <div class="logic-flow-main">
        <!-- <NodePanel :lf="lf"></NodePanel> -->
        <div class="logic-flow" ref="logicFlowRef" id="logic-flow"></div>
        <!-- <Setting
          class="logic-flow-setting"
          :data="nodeData!"
          :lf="lf"
          :type="settingType"
        ></Setting> -->
        
      </div>
      <!-- 当lf有值 才能注册事件 -->
      <!-- <Control v-if="lf" :lf="lf"></Control> -->
    </div>
  </template>
  
  <script lang="ts">
  export default { name: "LogicFlow" };
  </script>
  <script lang="ts" setup>
  import LogicFlow from "@logicflow/core";
  import "@logicflow/core/lib/style/index.css";
  import "@logicflow/extension/lib/style/index.css";
  import { onMounted, reactive, ref, ShallowRef, shallowRef } from "vue";
  import { registeNode, registerKeyboard, requiredConfig } from "./LogicFlow/index";
  import { ElMessage } from "element-plus";
  import { SettingType } from "@/types/logic-flow";
  import { useRouter } from "vue-router";
const router = useRouter()

const routerClick=()=>{
  router.push('/LogicFlow/index')
}
  const logicFlowRef = ref<HTMLDivElement>();
  const nodeData = ref<LogicFlow.NodeData | LogicFlow.EdgeData>(); // 节点数据
  // const state = reactive({
  //   settingType: "all" as SettingType,
  // });
  const settingType = ref<SettingType>("all");
  const lf = shallowRef<LogicFlow>();
  
  const getSettingInfo = (data: LogicFlow.NodeData | LogicFlow.EdgeData) => {
    switch (data.type) {
      case "launch":
        nodeData.value = data;
        settingType.value = data.type;
        break;
      case "approver":
        nodeData.value = data;
        settingType.value = data.type;
        break;
      case "link":
        nodeData.value = data;
        settingType.value = data.type;
        break;
      case "review":
        nodeData.value = data;
        settingType.value = data.type;
        break;
      case "polyline":
      case "dashedLine":
        nodeData.value = data;
        settingType.value = data.type;
        break;
    }
  };
  /**
   * @description 注册事件
   */
  const initEvent = (lf: ShallowRef<LogicFlow | undefined>) => {
    lf.value?.on("blank:click", (e) => {
      settingType.value = "all";
    });
    lf.value?.on("node:mousedown", ({ data }) => {
      lf.value?.selectElementById(data.id, false);
      getSettingInfo(data);
    });
    lf.value?.on("edge:click", ({ data }) => {
      lf.value?.selectElementById(data.id, false);
      getSettingInfo(data);
    });
    lf.value?.on("connection:not-allowed", (data) => {
      ElMessage.error(data.msg);
      return false;
    });
    lf.value?.on("node:dnd-add", ({ data }) => {
      // 选中节点 更改信息
      lf.value?.selectElementById(data.id, false);
      getSettingInfo(data);
      lf.value?.container.focus(); // 聚焦 能够使用键盘操作
    });
  };
  /**
   * @description 获取数据
   */
  const getData = () => {
    console.log(lf.value?.getGraphData());
  };
  /**
   * @description 提交 验证数据
   */
  const submit = () => {
    // const { nodes } = lf.value?.getGraphData() as LogicFlow.GraphData;
    // for (let index = 0; index < nodes.length; index++) {
    //   const data = nodes[index];
    //   const { properties } = data;
    //   console.log(properties,'properties')
    //   // 循环配置项
    //   for (const key in properties) {
    //     // 数组配置项 判断是否为空
    //     if (Array.isArray(properties[key])) {
    //       if (requiredConfig[key] && properties[key].length === 0) {
    //         return ElMessage.error(
    //           `${data.text?.value}节点 ${requiredConfig[key]}`
    //         );
    //       }
    //     } else {
    //       // 非数组配置项 判断是否为空
    //       if (requiredConfig[key] && !properties[key]) {
    //         return ElMessage.error(
    //           `${data.text?.value}节点 ${requiredConfig[key]}`
    //         );
    //       }
    //     }
    //   }
    // }
    console.log(lf.value?.getGraphData());
  };
  
  onMounted(() => {
    lf.value = new LogicFlow({
      container: logicFlowRef.value!,
      isSilentMode: true, // 设置为只读模式
      grid: true,
      style: {
      edge: {
        arrow: false // 全局关闭所有边的箭头
      }
    },
      keyboard: {
        enabled: true,
        shortcuts: registerKeyboard(lf, nodeData, settingType),
      },
      textEdit: false,
    });
    lf.value.setTheme({
    baseEdge: {
      arrow: false,  // 禁用所有基础边的箭头
    },
    polyline: {
      arrow: false,  // 单独禁用折线箭头
    },
  });
    registeNode(lf);
    initEvent(lf);
    lf.value.render(
        {
    "nodes": [
        {
            "id": "f78ca25d-b869-4849-853b-63a646d0e80f",
            "type": "approver",
            "x": 426,
            "y": 184,
            "properties": {
                "iconType": "fengxiang",
                "icon": "/src/assets/icon/fengxiang.png",
                "width": 80,
                "height": 50
            },
            "text": {
                "x": 426,
                "y": 184,
                "value": "风向风速仪"
            }
        },
        {
            "id": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7",
            "type": "approver",
            "x": 711,
            "y": 184,
            "properties": {
                "iconType": "bianyuan",
                "icon": "/src/assets/icon/bianyuan.png",
                "width": 80,
                "height": 50
            },
            "text": {
                "x": 711,
                "y": 184,
                "value": "边缘计算网关"
            }
        },
        {
            "id": "9f389cec-5691-4484-8520-dfb7b7771b85",
            "type": "approver",
            "x": 534,
            "y": 289,
            "properties": {
                "iconType": "bianmaqi",
                "icon": "/src/assets/icon/bianmaqi.png",
                "width": 80,
                "height": 50
            },
            "text": {
                "x": 534,
                "y": 289,
                "value": "编码器"
            }
        },
        {
            "id": "25cdb157-f274-4d69-a556-4c248183ec28",
            "type": "approver",
            "x": 388,
            "y": 287,
            "properties": {
                "iconType": "fengche",
                "icon": "/src/assets/icon/fengche.png",
                "width": 80,
                "height": 50
            },
            "text": {
                "x": 388,
                "y": 287,
                "value": "风车"
            }
        },
        {
            "id": "1ee11c99-6590-4842-a2af-017c5ee90e27",
            "type": "approver",
            "x": 465,
            "y": 364,
            "properties": {
                "iconType": "sifudianji",
                "icon": "/src/assets/icon/sifudianji.png",
                "width": 80,
                "height": 50
            },
            "text": {
                "x": 465,
                "y": 364,
                "value": "伺服电机"
            }
        },
        {
            "id": "c9b6e339-28be-4d70-af77-b674b915add2",
            "type": "approver",
            "x": 603,
            "y": 364,
            "properties": {
                "iconType": "qudong",
                "icon": "/src/assets/icon/qudong.png",
                "width": 80,
                "height": 50
            },
            "text": {
                "x": 603,
                "y": 364,
                "value": "伺服电机驱动"
            }
        },
        {
            "id": "8246cbc6-6ed9-4750-be0c-31190b88b4bc",
            "type": "textModel",
            "x": 421,
            "y": 134,
            "properties": {
                "width": 100,
                "height": 30
            },
            "text": {
                "x": 421,
                "y": 134,
                "value": "风向风速仪"
            }
        },
        {
            "id": "115bfcb2-b242-48df-966e-7a8677ccd9c3",
            "type": "textModel",
            "x": 718,
            "y": 139,
            "properties": {
                "width": 100,
                "height": 30
            },
            "text": {
                "x": 718,
                "y": 139,
                "value": "边缘计算网关"
            }
        },
        {
            "id": "a822a496-9d63-4721-9547-4fa077883db9",
            "type": "textModel",
            "x": 535,
            "y": 243,
            "properties": {
                "width": 100,
                "height": 30
            },
            "text": {
                "x": 535,
                "y": 243,
                "value": "编码器"
            }
        },
        {
            "id": "eb5e305b-a173-4d6a-b6ae-b3523572e5fe",
            "type": "textModel",
            "x": 342,
            "y": 276,
            "properties": {
                "width": 100,
                "height": 30
            },
            "text": {
                "x": 342,
                "y": 276,
                "value": "风车"
            }
        },
        {
            "id": "7eeb65c5-532b-4795-b3cb-2e2d8356a9a5",
            "type": "textModel",
            "x": 461,
            "y": 398,
            "properties": {
                "width": 100,
                "height": 30
            },
            "text": {
                "x": 461,
                "y": 398,
                "value": "伺服电机"
            }
        },
        {
            "id": "2387a17e-1bbb-48b6-9a21-4d8139076839",
            "type": "textModel",
            "x": 602,
            "y": 396,
            "properties": {
                "width": 100,
                "height": 30
            },
            "text": {
                "x": 602,
                "y": 396,
                "value": "伺服电机驱动"
            }
        }
    ],
    "edges": [
        {
            "id": "24590ba8-789e-425e-928a-3cbd67b48cac",
            "type": "polyline",
            "properties": {},
            "sourceNodeId": "f78ca25d-b869-4849-853b-63a646d0e80f",
            "targetNodeId": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7",
            "sourceAnchorId": "f78ca25d-b869-4849-853b-63a646d0e80f_1",
            "targetAnchorId": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7_3",
            "startPoint": {
                "x": 466,
                "y": 184
            },
            "endPoint": {
                "x": 671,
                "y": 184
            },
            "pointsList": [
                {
                    "x": 466,
                    "y": 184
                },
                {
                    "x": 671,
                    "y": 184
                }
            ]
        },
        {
            "id": "ae01061c-5465-4bf3-8fcd-4aa6b0d8b49b",
            "type": "polyline",
            "properties": {},
            "sourceNodeId": "9f389cec-5691-4484-8520-dfb7b7771b85",
            "targetNodeId": "25cdb157-f274-4d69-a556-4c248183ec28",
            "sourceAnchorId": "9f389cec-5691-4484-8520-dfb7b7771b85_3",
            "targetAnchorId": "25cdb157-f274-4d69-a556-4c248183ec28_1",
            "startPoint": {
                "x": 494,
                "y": 289
            },
            "endPoint": {
                "x": 428,
                "y": 287
            },
            "pointsList": [
                {
                    "x": 494,
                    "y": 289
                },
                {
                    "x": 461,
                    "y": 289
                },
                {
                    "x": 461,
                    "y": 287
                },
                {
                    "x": 428,
                    "y": 287
                }
            ]
        },
        {
            "id": "712a115c-085a-4c3e-91ab-c34e1ec2b2af",
            "type": "polyline",
            "properties": {},
            "sourceNodeId": "25cdb157-f274-4d69-a556-4c248183ec28",
            "targetNodeId": "1ee11c99-6590-4842-a2af-017c5ee90e27",
            "sourceAnchorId": "25cdb157-f274-4d69-a556-4c248183ec28_2",
            "targetAnchorId": "1ee11c99-6590-4842-a2af-017c5ee90e27_3",
            "startPoint": {
                "x": 388,
                "y": 312
            },
            "endPoint": {
                "x": 425,
                "y": 364
            },
            "pointsList": [
                {
                    "x": 388,
                    "y": 312
                },
                {
                    "x": 388,
                    "y": 342
                },
                {
                    "x": 395,
                    "y": 342
                },
                {
                    "x": 395,
                    "y": 364
                },
                {
                    "x": 425,
                    "y": 364
                }
            ]
        },
        {
            "id": "cc1eb4cd-7714-4438-a750-75ed8ed4186e",
            "type": "polyline",
            "properties": {},
            "sourceNodeId": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7",
            "targetNodeId": "c9b6e339-28be-4d70-af77-b674b915add2",
            "sourceAnchorId": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7_1",
            "targetAnchorId": "c9b6e339-28be-4d70-af77-b674b915add2_1",
            "startPoint": {
                "x": 751,
                "y": 184
            },
            "endPoint": {
                "x": 643,
                "y": 364
            },
            "pointsList": [
                {
                    "x": 751,
                    "y": 184
                },
                {
                    "x": 781,
                    "y": 184
                },
                {
                    "x": 781,
                    "y": 364
                },
                {
                    "x": 643,
                    "y": 364
                }
            ]
        },
        {
            "id": "2efa2976-0e66-4316-b322-e82518ee1f3f",
            "type": "polyline",
            "properties": {},
            "sourceNodeId": "1ee11c99-6590-4842-a2af-017c5ee90e27",
            "targetNodeId": "c9b6e339-28be-4d70-af77-b674b915add2",
            "sourceAnchorId": "1ee11c99-6590-4842-a2af-017c5ee90e27_1",
            "targetAnchorId": "c9b6e339-28be-4d70-af77-b674b915add2_3",
            "startPoint": {
                "x": 505,
                "y": 364
            },
            "endPoint": {
                "x": 563,
                "y": 364
            },
            "pointsList": [
                {
                    "x": 505,
                    "y": 364
                },
                {
                    "x": 535,
                    "y": 364
                },
                {
                    "x": 535,
                    "y": 364
                },
                {
                    "x": 533,
                    "y": 364
                },
                {
                    "x": 533,
                    "y": 364
                },
                {
                    "x": 563,
                    "y": 364
                }
            ]
        },
        {
            "id": "13e3feed-3dcf-4d1f-8062-c2f08ab11caa",
            "type": "polyline",
            "properties": {},
            "sourceNodeId": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7",
            "targetNodeId": "9f389cec-5691-4484-8520-dfb7b7771b85",
            "sourceAnchorId": "722d80f6-00a8-4cb3-a1f7-72c9f9f784e7_2",
            "targetAnchorId": "9f389cec-5691-4484-8520-dfb7b7771b85_1",
            "startPoint": {
                "x": 711,
                "y": 209
            },
            "endPoint": {
                "x": 574,
                "y": 289
            },
            "pointsList": [
                {
                    "x": 711,
                    "y": 209
                },
                {
                    "x": 711,
                    "y": 289
                },
                {
                    "x": 574,
                    "y": 289
                }
            ]
        }
    ]
}
    );
    lf.value.translateCenter(); // 将图形移动到画布中央
  });
  </script>
  
  <style lang="scss" scoped>
  @keyframes dash-flow {
    from { stroke-dashoffset: 0; }
    to { stroke-dashoffset: 20; } /* 等于 dasharray 值之和(5+3=8)的2.5倍 */
  }
  .logic-flow-container {
    width: 100%;
    height: 100%;
    .logic-flow-header {
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      padding: 0 20px;
    }
    .logic-flow-main {
      display: flex;
      width: 100%;
      height: calc(100% - 54px);
      position: relative;
      .logic-flow-setting {
        flex-basis: 400px;
        flex-shrink: 0;
        border-left: 1px solid #ccc;
      }
      .logic-flow {
        position: relative;
        flex: 1;
        height: 100%;
      }
    }
  }
  </style>
  